<!--这个都可以删掉-->
<!--
<template>
  <div class="home">
    这是首页
    <!--
  <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" /> 
    --><!--
  </div>
</template>
 --><!--
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  /*name: "HomeView",
    components: {
    HelloWorld,
  }, */
};
</script> 
-->

<template>
  <div class="home">
    <div class='headers'>
      <div class='headers-main'>
        <div class="clearfix">
          <Header></Header>
        </div>
        <!--@change="" 切换元素-->
        <div class="clearfix">
          <ly-tab
            v-model="selectedId"
            :items="items"
            :options="options"
            @change="changeTab"
          >
          </ly-tab>
        </div>
      </div>
    </div>
    <!--       <section> -->
    <!--         <Header></Header> -->
    <!-- 这是首页内容 -->
    <!-- 
    <Tabbar></Tabbar>
    <tabbar></tabbar>
    有区别吗？两个颜色
     -->
    <!-- 后期调整-->
    <!--
        <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
      >
        </ly-tab> -->
    <!--       </section> -->
    <!-- vue中的ref的作用是用来获取dom
    ref="aa1"  this.&ref.aa -->
    <section ref="wrapper">
      <!--     <section class="wrapper"> -->
      <!-- 在section里面再加一个div 才能实现滚动 还有上面section要加上 class类 -->
      <div class="content">
        <!--  调试 <Swiper v-if='false'> </Swiper> -->
        <!-- 如何针对性的展示 哪些元素 v-if -->
        <div
          v-for='(item,index) in newData'
          :key='index'
        >
          <!-- 渲染每一个对象 如 Swiper -->
          <!-- 应该父组件的值传给子组件 -->
          <!--每个对象  {{item}} -->
          <!-- ???下不去 -->
          <!-- item.data 这里抱有疑问 -->
          <Swiper
            v-if='item.type=="swiperList"'
            :swiperList='item.data'
          ></Swiper>
          <Icons
            v-if='item.type=="iconsList"'
            :iconsList='item.data'
          ></Icons>
          <!-- <icons></icons> 渲染了两个 -->
          <Recommend
            v-if='item.type=="recommendList"'
            :recommendList='item.data'
          ></Recommend>
          <Like
            v-if='item.type=="likeList"'
            :likeList='item.data'
          ></Like>
          <!-- 上下注意 -->
          <Ad
            v-if='item.type=="adList"'
            :adList='item.data'
          ></Ad>
        </div>
      </div>
    </section>

    <!-- 底部栏 -->
    <Tabbar></Tabbar>

  </div>
</template>
<script>
//import Swiper from "c:/Users/39007/Desktop/vue-gameshop/src/views/HomeView.vue";
import Tabbar from "../components/common/Tabbar.vue";
import Header from "../components/home/Header.vue";
//import Swiper from "../components/home/Swiper.vue";
import Icons from "../components/home/Icons.vue";
import Swiper from "../components/home/Swiper.vue";
/* BScroll */
import BScroll from "@better-scroll/core";
import ObserveDom from "@better-scroll/observe-dom";
BScroll.use(ObserveDom);
import Recommend from "../components/home/Recommend.vue";
import Ad from "../components/home/Ad.vue";
import Like from "../components/home/Like.vue";
import axios from "axios"; /* npm install axios -S  后续要进行二次封装 */
import Indicator from "../common/api/request.js";
/* 上面是组件* */
/* 引进插件 better-scroll */
/* npm install better-scroll@next -S   这个不可以*/
/* npm install better-scroll --save    这个可以*/
/* 最简单的初始化代码如下：
import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper) */
/* --------------------------------------------------- */
/* import BetterScroll from 'better-scroll'
let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {}) */
import BetterScroll from "better-scroll";
/* import Ad from "@/components/home/Ad.vue"; */
export default {
  name: "home",
  data() {
    return {
      changValue: null,
      selectedId: 0,
      //topBar: [], //this.topBar = res.data.data.topBar;//mothods赋值  改为items
      /* items: [   //前台设计的时候需要用到的数据，现在let res = await axios({ url: "/api/home/index_list/0/data/1" });里面获得从后台index.js获得数据
        { label: "首页" },
        { label: "推荐" },
        { label: "Android" },
        { label: "前端" },
        { label: "后端" },
        { label: "iOS" },
        { label: "产品" },
        { label: "人工智能" },
        { label: "设计" },
      ], */
      items: [],
      newData: [],
      oBetterScroll: "",
      tBetterScroll: "",
      options: {
        activeColor: "#b0325f",
        /* activeColor: "#1d98bd", */
        //底边颜色
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
    };
  },
  components: {
    Header,
    Swiper,
    Icons,
    Recommend,
    Like,
    Ad,
    Tabbar,
    //挂载在这个地方
  },
  //.then 发送一个请求  res 回复
  //很多次请求，没必要写道created里面
  created() {
    //方法
    this.getData(); //设置一个方法//代码规范 //接口请求
    axios({
      url: " /api/index_list/1/data/1",
    }).then((res) => {
      console.log(res); /* 接收到一个数据 */
    });
  },
  /* vue.js中created方法是一个生命周期钩子函数，一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。一般可以在created函数中调用ajax获取页面初始化所需的数据。 */
  /*   created() {
    console.log(this.$data, this.$el); /* 看得出有数据但是找不到节点 ，所以会报错 */
  /*}, */
  /* ------------------------------- */
  /* mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。 */

  //这里先注释 先放dom，等dom加载完 才实现滑动 涉及到 BetterScroll 的内部计算 要保证所有dom加载完毕，才能实现，这样才不会出问题
  //mounted() {
  /* el 当前节点 */
  //console.log(this.$data, this.$el); /* 看得出有数据但是找不到节点 */
  /* 两者使用方法 */
  /* 子元素要比父元素要高 必须添加在mounted中 */
  //new BetterScroll(this.$refs.wrapper, {
  /* new BetterScroll(".wrapper", { */
  //movable: true,
  //zoom: true,
  //mouseWheel: true,
  //});
  /*     let bs = new BetterScroll(".wrapper", {
      movable: true,
      zoom: true,
    }); */
  //},
  methods: {
    //async 性能优化
    async getData() {
      /* ,和;要区分 */
      /* let aa = await Indicator.$axios({ url: "/api/index_list/0/data/1" }); */
      /* let res = await axios({ url: "/api/index_list/0/data/1" }); */ /* 封装后 */
      let res = await Indicator.$axios({ url: "/api/index_list/0/data/1" });
      /* console.log(aa); */ /* ƒ then() { [native code] } 多了.then 返回的是then方法*/
      //console.log(res); 必不可少的步骤 拿res 看看是否生效
      //提高 this.items = res.data.data.topBar 的性能  freeze被冻结对象自身的所有属性都不可能以任何方式被修改。
      //Object.freeze  提高性能
      this.items = Object.freeze(res.topBar);
      /* this.items = Object.freeze(res.data.data.topBar); */ //this指向 res  this.topBar//items =res.data.data.topBar
      /* 原因return的data为v.data.data; */
      this.newData = Object.freeze(res.data);
      /*       console.log(res.data.data.topBar); */
      /* 之前用.then
      .then(
        (res) => {
          console.log(res);
          /* TypeError: console is not a function 出现错误了 少些.log */
      /*  }
      );*/
      setTimeout(() => {
        //修改数据
        this.changValue = 1;
        //DOM还没更新
        this.$nextTick(() => {
          this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {
            movable: false,
            zoom: false,
            click: false,
            mouseWheel: false,
          });
        });
        //this.$nextTick(()=> {}) 函数表示当dom都加载完毕了 才执行  解决下拉出错问题
        this.$nextTick(() => {
          this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {
            movable: true,
            zoom: true,
            mouseWheel: true,
            click: true,
          });
        });
      }, 0);
      //
    },

    //async 要和 await 搭配使用，否者会提示await  Unexpected reserved 意外保留swait
    async addData(index) {
      //用来负责点击请求的
      let res = await Indicator.$axios({
        url: "/api/index_list/" + index + "/data/1",
      });
      //this.items = Object.freeze(res.topBar);
      this.newData = Object.freeze(res.data);
      console.log(res);
      //点击大红袍拿到的是数组 点击首页拿到的是大红袍
      if (res.constructor != Array) {
        //证明他是对象
        this.newData = res.data;
      } else {
        this.newData = res;
      }
      //
      setTimeout(() => {
        //修改数据
        this.changValue = 1;
        //DOM还没更新
        this.$nextTick(() => {
          this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {
            movable: true,
            zoom: true,
            click: true,
            mouseWheel: true,
          });
        });
      }, 0);
      //
      //到这里了就显示可以切换了
      this.$nextTick(() => {
        this.tBetterScroll = new BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true,
          click: true,
          mouseWheel: true,
        });
      });
      //
    },

    changeTab(item, index) {
      this.addData(index);
      console.log(index);
      /* 输出items的下标 控制点的是哪一个 */
    },
  },
};
</script>

<style scoped>
/* .body {
  font-size: 16px;
} */

/* 后期调整 */
.ly-tab {
  display: fixed;
  width: 100%;
  z-index: 2;
  position: fixed;
  top: 50px;
  left: 0px;
  background-color: rgba(255, 192, 203, 0.2); /* 坑我 */
}

/* .ly-tab-list {
  font-size: 16px;
} */
/* 样式穿透
::v-deep.ly-tab {
  box-shadow: none;
} */
.home {
  display: flex;
  flex-direction: column;
  width: 100vw; /* 100vw等于当前浏览器的视窗宽度 */
  height: 100vh; /* 100vh等于当前浏览器的视窗高度 */
  overflow: hidden; /**溢出隐藏 */
}
.headers-main {
  /* position: fixed; */
  display: flex;
  width: 100vw;
  left: 0;
  top: 0px;
}
/* 全局要做的是让section滚动起来 */
section {
  flex: 1;
  /* 
  .item {flex: 1;}
    .item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
} */
  /*   margin-top: -15px; */
  overflow: hidden;
  /*   width: 100%; */
  /*   height: 108px; */
  margin-top: 98px; /* 不加margin-top上面是缩上去的 */
  /* margin-bottom: 98px; */
}
.headers {
  /*   position: fixed; */
  /*   position: flex; */
  width: 100%;
  left: 0;
  /*   top: 80px; */
  /*   height: 98px; */
}

.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
  zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>